<template>
	<view class="index">
		<view class="apply-card-box">
			<view class="color-666">最高可借额度 (元)</view>
			<view class="apply-money-box flex-center">
				<text>{{$common.addThousandsSeparator(!userInfo.availableAmount?58000:userInfo.showAmount)}}</text>
				<!-- <text style="font-size: 56rpx;letter-spacing: 8rpx;" v-else>暂无可用额度</text> -->
			</view>
			<view class="font-s-12 color-999">{{yearRatio || '-'}}</view>
			<!-- <view class="phone-input">
				<static-image src="/static/img/index/icon-phone.png" width="32" height="32" margin-right="16"></static-image>
				<u-input class="flex-1" v-model="form.phonenumber" type="number" maxlength="11" placeholder="请输入手机号码" :custom-style="{fontSize: '36rpx',fontWeight:'bold',letterSpacing: '4rpx'}" placeholder-style="font-weight:initial;letterSpacing:0;color:#999999;font-size:32rpx;"/>
			</view>
			<view class="apply-btn click-btn" v-if="true">
				<u-button type="primary" shape="circle" @click="toApply()" :custom-style="{background:'linear-gradient( 270deg, #33A0FF 0%, #1F78FF 100%)',fontSize:'32rpx',fontWeight:'bold',height:'96rpx',letterSpacing: '2rpx'}">查看我的额度</u-button>
			</view> -->
			<view class="apply-btn" v-if="userInfo.isWaitRepay===0 && userInfo.isFaceOrc===1">
				<u-button type="primary" shape="circle" @click="toApply()" :custom-style="{background:'linear-gradient( 270deg, #33A0FF 0%, #1F78FF 100%)',fontSize:'32rpx',fontWeight:'bold',height:'96rpx',letterSpacing: '2rpx'}">
					<text>提交审核</text>
					<static-image src="/static/img/index/icon-arrow-right.png" width="16" height="16" margin-left="10"></static-image>
				</u-button>
				<view class="examine-tips">
					<static-image src="/static/img/index/icon-lightning.png" width="24" height="24"></static-image>
					<text>极速放款</text>
				</view>
			</view>
			<view class="apply-btn click-btn" v-else>
				<view class="improve-btn" @click="$navigator(userInfo.isFaceOrc===1?'/pagesA/quota/index':'/pagesA/setting/authentication')">
					<text>去提高额度</text>
					<static-image src="/static/img/index/icon-arrow-right.png" width="16" height="16" margin-left="10"></static-image>
				</view>
			</view>
			<view class="agreement-box" @click="agreement=!agreement" v-if="userInfo.isWaitRepay===0 && userInfo.isFaceOrc===1">
				<static-image v-if="agreement" src="/static/img/common/agreement-active.png" width="32" height="32"></static-image>
				<static-image v-else src="/static/img/common/agreement-no.png" width="32" height="32"></static-image>
				<view class="mar-l-5">
					<text>我已阅读并同意</text>
					<text class="color-blue" @click.stop="$common.navigator('/pagesA/setting/userAgreement')">《用户服务协议》</text>
				</view>
			</view>
		</view>
		<static-image src="/static/img/index/img-2.png" width="100%" height="300" margin-bottom="24"></static-image>
		<view class="illustrate-box">
			<view class="tabs-box">
				<view class="tabs-item" :class="{active: current==0}" @click="change(0)">申请条件</view>
				<u-line length="32" color="#ddd" direction="col"></u-line>
				<view class="tabs-item" :class="{active: current==1}" @click="change(1)">产品申明</view>
			</view>
			<view class="illustrate-content">
				<view class="" v-if="current==0">
					<static-image src="/static/img/index/img-3.png" width="100%" height="224"></static-image>
					<static-image src="/static/img/index/img-4.png" width="100%" height="320" margin-top="32"></static-image>
				</view>
				<u-parse v-if="current==1" :html="agreement9" :tag-style="styles"></u-parse>
			</view>
		</view>
		<view class="tips-box">
			<view>*实际可借额度、年化利率、还款方式等以最终审核为准</view>
			<view>温馨提示：完成注册后，平台将不定期通过短信、电话等方式向您提供产品信息及贷款咨询服务。</view>
			<view>郑重声明：所有贷款在未成功放款前，绝不收取任何费用。为了保障您的资金安全，请不要相信任何要求您支付费用的消息、邮件、电话等不实信息。</view>
			<view>浙ICP备2024138011</view>
			<view>杭州融会投科技有限公司</view>
		</view>
		<view class="service-btn" @click="$common.navigator('/pagesA/setting/contact')">专属客服</view>
		<!-- 专属新人礼 -->
		<u-mask :show="newcomerShow" @click="newcomerClose()" :custom-style="{background: 'rgba(0, 0, 0, 0.72)'}">
			<view class="newcomer-popup">
				<view class="mask-content" @tap.stop>
					<image @click="newcomerClose()" class="close-btn" src="/static/img/common/icon-close.png" mode=""></image>
					<view class="newcomer-content">
						<view class="newcomer-tips">1分钟极速注册 最快5分钟审核</view>
						<view class="font-s-16 color-666">专属额度</view>
						<view class="apply-money-box">{{$common.addThousandsSeparator(58000)}}</view>
						<view class="end-time-box">
							<view>还剩</view>
							<view class="number-text">{{timeContent.split(':')[0]}}</view>
							<view class="separate-text">:</view>
							<view class="number-text">{{timeContent.split(':')[1]}}</view>
							<view class="separate-text">:</view>
							<view class="number-text">{{timeContent.split(':')[2]}}</view>
							<view class="">后失效</view>
						</view>
						<view class="mar-t-24">
							<u-button type="primary" @click="newcomerClose(true)" :custom-style="{background:'linear-gradient( 270deg, #33A0FF 0%, #1F78FF 100%)',fontSize:'32rpx',fontWeight:'bold',height:'100rpx',letterSpacing: '4rpx'}">领取额度</u-button>
						</view>
						<view class="text-c font-s-12 color-999 mar-t-24">*实际可借额度以最终审核为准</view>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				yearRatio: '',
				orderInfo: {},
				userInfo:{},
				form:{
					phonenumber: ''
				},
				current:0,
				agreement: false,
				agreement9: '',
				styles:{'p': 'line-height: 44rpx;margin-bottom: 12rpx;font-size: 28rpx'},
				timeContent:'02:00:00',
				totalSeconds: 2 * 60 * 60,
				newcomerShow: false
			}
		},
		onLoad(e) {
			if(e.recommendUserId) uni.setStorageSync('recommendUserId',e.recommendUserId)
			if(e.channelId) {
				this.selectConnStatus(e.channelId)
			}
			this.getAgreementDetail()
			this.getConfigKey()
			if(!uni.getStorageSync('token')){
				this.updateCountdown()
				this.countdownInterval = setInterval(this.updateCountdown, 1000);
				setTimeout(()=>{
					this.newcomerShow = true
				})
			}
		},
		onShow() {
			if(uni.getStorageSync('token')){
				this.getUserInfo()
			}
		},
		methods: {
			selectConnStatus(channelId){
				this.$request({
					url: '/loginUserInfo/selectConnStatus',
					method: 'get',
					data:{channelId:channelId}
				}).then(res => {
					if(res.data.connStatus){
						uni.setStorageSync('channelId',channelId)
					}else{
						uni.removeStorageSync('channelId')
						uni.reLaunch({
							url:'/pages/common/404'
						})
					}
				})
			},
			getUserInfo(){
				this.$request({
					url: '/loginUserInfo/getDetail',
					method: 'get'
				}).then(res => {
					this.userInfo = res.data
				})
				this.$request({
					url: '/orderInfo/getLastOrderInfoDetail',
					method: 'get'
				}).then(res => {
					this.orderInfo = res.data
				})
			},
			getConfigKey(){
				this.$request({
					url: '/system/config/configKey/year_ratio',
					method: 'get'
				}).then(res => {
					this.yearRatio = res.msg
				})
			},
			getAgreementDetail(){
				this.$request({
					url: '/agreement/getDetail',
					method: 'get',
					data: {type:9}
				}).then(res => {
					if(res.code===200){
						this.agreement9 = res.data.content
					}
				})
			},
			change(index){
				this.current = index
			},
			toApply(){
				if (!this.agreement) {
					return this.$u.toast('请阅读并同意相关协议');
				}
				if(this.orderInfo && this.orderInfo.saveStatus===1){
					uni.navigateTo({
						url:'/pagesA/order/detail?orderId='+this.orderInfo.id
					})
				}else{
					uni.navigateTo({
						url:'/pagesA/applyFor/index?orderId='+(this.orderInfo?.id || '')
					})
				}
			},
			newcomerClose(login){
				this.newcomerShow = false
				clearInterval(this.countdownInterval);
				if(login){
					this.$common.navigator('/pages/login')
				}
			},
			updateCountdown() {
			  // 计算剩余的小时、分钟和秒数
			  var hours = Math.floor(this.totalSeconds / 3600);
			  var minutes = Math.floor((this.totalSeconds % 3600) / 60);
			  var seconds = this.totalSeconds % 60;
			  // 格式化时间显示，确保每部分都是两位数
			  var formattedHours = ('0' + hours).slice(-2);
			  var formattedMinutes = ('0' + minutes).slice(-2);
			  var formattedSeconds = ('0' + seconds).slice(-2);
			  // 更新倒计时显示
			  this.timeContent = formattedHours + ':' + formattedMinutes + ':' + formattedSeconds;
			  // 减少总秒数
			  this.totalSeconds--;
			  // 如果倒计时结束，显示“时间到”并停止更新
			  if (this.totalSeconds < 0) {
			    countdownElement.textContent = '时间到！';
			    clearInterval(this.countdownInterval);
			  }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		background-image: url('~@/static/img/index/header-bg.png');
		background-size: 100% 800rpx;
		background-repeat: no-repeat;
		padding:256rpx 24rpx 60rpx;
		.apply-money-box{
			background-image: url('~@/static/img/index/money-bg.png');
			background-size: 100% 100%;
			width: 464rpx;
			height: 104rpx;
			margin: 24rpx auto;
			font-weight: bold;
			font-size: 104rpx;
			line-height: 104rpx;
		}
		.apply-card-box{
			background-image: url('~@/static/img/index/left-right-bg.png');
			background-size: 100% 176rpx;
			background-repeat: no-repeat;
			text-align: center;
			padding: 140rpx 24rpx 44rpx;
			margin-bottom: 24rpx;
			background-color: #FFFFFF;
			border-radius: 24rpx;
			.phone-input{
				width: 654rpx;
				height: 96rpx;
				background: #FAFAFA;
				border-radius: 16rpx;
				border: 2rpx solid #F0F2F5;
				display: flex;
				align-items: center;
				padding: 0 32rpx;
				margin: 48rpx 0;
			}
			.apply-btn{
				position: relative;
				margin-top: 66rpx;
				&.click-btn::after{
					content: '';
					background-image: url('~@/static/img/index/icon-click.png');
					background-size: 100% 100%;
					width: 192rpx;
					height: 192rpx;
					position: absolute;
					right: 62rpx;
					top: -12rpx;
					z-index: 1;
					pointer-events: none;
				}
				.examine-tips{
					width: 152rpx;
					height: 48rpx;
					background: #FF9D47;
					border-radius: 24rpx 24rpx 24rpx 0rpx;
					position: absolute;
					top: -24rpx;
					right: 48rpx;
					z-index: 1;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #FFFFFF;
					padding-left: 12rpx;
				}
				.improve-btn{
					width: 606rpx;
					height: 96rpx;
					background: linear-gradient( 270deg, #FF9D47 0%, #FF781F 100%);
					box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(255,120,31,0.4);
					border-radius: 72rpx;
					border: 2rpx solid #FFFBE0;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					color: #FFFFFF;
					font-weight: bold;
					margin: auto;
				}
			}
			.agreement-box{
				display: flex;
				justify-content: center;
				margin-top: 32rpx;
				position: relative;
				z-index: 2;
			}
		}
		.illustrate-box{
			margin-top: 24rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 40rpx 24rpx 24rpx;
			.tabs-box{
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;
				.tabs-item{
					flex: 1;
					text-align: center;
					font-size: 36rpx;
					font-weight: bold;
					&.active{
						color: #1f78ff;
					}
				}
			}
			.illustrate-content{
				color: #999999;
			}
		}
		.tips-box{
			font-size: 24rpx;
			color: #8C9DB8;
			text-align: center;
			margin-top: 48rpx;
			>view{
				margin-bottom: 16rpx;
				line-height: 40rpx;
			}
		}
		.service-btn{
			width: 208rpx;
			height: 76rpx;
			background: linear-gradient( 180deg, #EBF3FF 0%, #F5F9FF 100%);
			border-radius: 38rpx;
			border: 2rpx solid #FFFFFF;
			margin: 32rpx auto 0;
			color: #1F78FF;
			font-weight: bold;
			text-align: center;
			line-height: 72rpx;
		}
		.newcomer-popup{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;
			.mask-content{
				position: relative;
				.close-btn{
					width: 56rpx;
					height: 56rpx;
					position: absolute;
					right: 0;
					top: -88rpx;
				}
				.newcomer-content{
					background-image: url('~@/static/img/index/newcomer-popup-bg.png');
					background-size: 100% 344rpx;
					background-repeat: no-repeat;
					background-color: #FFFFFF;
					border-radius: 32rpx;
					width: 654rpx;
					padding: 176rpx 48rpx 48rpx;
					position: relative;
					.newcomer-tips{
						background-image: url('~@/static/img/index/newcomer-tip-bg.png');
						background-size: 100% 100%;
						width: 362rpx;
						height: 56rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						position: absolute;
						top: 176rpx;
						right: 48rpx;
						text-align: center;
						padding-top: 6rpx;
					}
					.apply-money-box{
						text-align: left;
						padding: 0 18rpx;
						width: 100%;
					}
					.end-time-box{
						margin-top: 44rpx;
						display: flex;
						align-items: center;
						color: #999999;
						font-size: 26rpx;
						.separate-text{
							color: #FF8533;
						}
						.number-text{
							width: 38rpx;
							height: 38rpx;
							background: #FF8533;
							border-radius: 4rpx;
							color: #FFFFFF;
							text-align: center;
							line-height: 38rpx;
							margin: 0 8rpx;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
</style>
